<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路由</title>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <router-link to="/">首页</router-link>
            <router-link to="/post">帖子管理</router-link>
            <router-link to="/user/王花花 ">王花花</router-link>
            <router-link to="/user/李小子 ">李小子</router-link>
            <button @click="skip">自动跳转(漫游)</button>          
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <!-- js -->
    <script>
        var routes = [
            {
                path: "/", 
                component: {
                    template: `
                    <div>首页</div>
                    `
                }                         
            },{
                path: "/post",
                meta: {
                    loginRequire: true // 这样就方便了很多，直接判断这个就好

                },
                component: {
                    template: `
                    <div>
                        帖子                       
                        <router-link to="/post/rain">rain</router-link>
                        <router-view>
                        </router-view>
                    </div>
                    `
                },
                children: [
                    {path: "rain", component: {
                        template: `<p>帖子管理的子</p>`
                    }}
                ]
            } ,{
                path: "/user/:name",
                component: {
                    template: `
                    <div>
                        用户名：{{$route.params.name}}
                        年龄： {{$route.query.age}}    
                        <router-link :to='"/user/" + $route.params.name + "/more"'>
                            更多信息1
                        </router-link>
                        <!--- 这是第二种方法
                        <router-link to="more" append>更多信息2</router-link>
                        这个要注意，如果点击已经跳转了，再次点击会再后面追加，就会出错
                        --->
                        <router-view></router-view>
                    </div>
                    `
                },
                children: [
                    {
                        path: "more",
                        component: {
                            template: `
                            <div>
                                {{$route.params.name}}的详细信息是<br>
                                <p>dfkj dkfj asdkfsj fkdsf sasf </p>    
                            </div>
                            `
                        }
                    }
                ]
            }
        ];
        var router = new VueRouter({
            routes: routes
            // mode: "history"   // 单文件时不能加上这个
        });

        // ========== 导航钩子 ==================
        // =======================================
        // ============================路由访问之前
        router.beforeEach((to, from, next) => {
            // to and from are both route objects. must call `next`.
            // 如果是帖子管理就跳转到/, 相当于做验证
            var logged_in = false;
            console.log(to.matched);  // 这个属于它的方法，它所匹配的父级路由和本身
            // if(!logged_in && to.path === "/post") next("/");

            // 第一种方法
            // if(!logged_in && to.matched.some(function(item){
            //     // 防止访问"/post/child"还能访问
            //     return item.path == "/post"; 
            // })){next("/");}

            // // 第二种方法
            if(!logged_in && to.matched.some((item) => {
                return item.meta.loginRequire;
            }))next("/");
            else next();
        });

        // ============================ 路由访问之后
        router.afterEach((to, from) => {
            // to and from are both route objects.

        })

        new Vue({
            el: "#app",
            router: router,
            methods: {
                skip(){
                    console.log(this);  // vue
                    setTimeout(function(){
                        // 这里不能使用ES6的语法,用es6的话this指向vue
                        console.log(this);  // window
                        this.router.push("/");                        
                        setTimeout(() => {
                            // 这里可以用，因为this继承父级，是window
                            this.router.push("/user/王花花");
                            console.log(this); // window
                        }, 1000);
                    }, 500);
                }
            }
        });

    </script>

</body>
</html>